<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>三栏布局-flex</title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			html,body{
				height: 100%;
			}
			.con{
				height: 100%;
				display: flex;
				flex-direction: column;
			}
			header{
				height: 96px;
				background-color: #d4d9dc;
				margin-bottom: 20px;
			}
			section{
				display: flex;
				flex: 1;
				overflow-y: auto;
			}
			footer{
				margin-top: 20px;
				height: 56px;
				background-color: #c2bae9;
			}
			.lef{
				width: 210px;
				background-color: #622b62;
			}
			.cen{
				flex: 1;
				background-color: #53c553;
				margin: 0 15px;
			}
			.rig{
				width: 210px;
				background-color: #f6c4ad;
			}
		</style>
	</head>
	<body>
		<div class="con">
			<header>我是页眉</header>
			<section>
				<div class="lef">侧边栏导航</div>
				<div class="cen">主内容</div>
				<div class="rig">右边栏</div>
			</section>
			<footer>我是页脚</footer>
		</div>
		
	</body>
</html>
